<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部  -->
    <div class="head">
        <div class="head-c">
            <a href="" class="logo">
                <img src="img/logo.png" alt="">
            </a>
            <ul class="nav">
                <li class="nav-item">
                    <a href="index.html">首页</a>
                    <span class="line"></span>
                </li>
                <li class="nav-item">
                    <a href="">产品</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="">项目</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="">关于</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="news.html">新闻</a>
                    <span class="line"></span>

                </li>
                <li class="nav-item">
                    <a href="">服务</a>
                    <span class="line"></span>

                </li>
            </ul>
        </div>
    </div>

    <!-- banner  -->
    <div class="banner">
        <img src="img/banner.jpg" alt="">
        <div class="dot">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- 项目展示  -->

    <div class="project">
        <div class="project-c">
            <!-- 标题部分  -->
            <div class="title">
                <div class="cname">
                    项目展示
                </div>
                <div class="ename">
                    PROJECT DISPLAY
                </div>
                <div class="line">
                    <div class="l"></div>
                    <div class="r"></div>
                </div>
            </div>

            <!-- 导航  -->
            <ul class="nav">
                <li class="nav-item">
                    <a href="">家居</a>
                    <span class="line"></span>
                </li>
                <!-- 模拟导航项目之间 的竖线  -->
                <li class="col-line"></li>
                <li class="nav-item">
                    <a href="">办公</a>
                    <span class="line"></span>

                </li>
                <li class="col-line"></li>

                <li class="nav-item">
                    <a href="">餐饮</a>
                    <span class="line"></span>

                </li>
                <li class="col-line"></li>

                <li class="nav-item">
                    <a href="">more</a>
                    <span class="line"></span>

                </li>

            </ul>

            <!-- 项目列表  -->

            <ul class="project-list">
                <li class="project-item">
                    <div class="cover">
                        <img src="img/img1.jpg" alt="">
                    </div>
                    <div class="info">
                        <div class="city">
                            月渐冷朗 北京
                        </div>
                        <div class="desc">
                            描述信心.....
                        </div>
                        <div class="icon">

                        </div>
                    </div>
                    <!-- 蒙层  -->
                    <div class="mask">
                        <div class="p1">Marylebone公寓室内改造 上海</div>
                        <div class="p2">木隔墙创造出简约的生活空间</div>
                        <div class="p3">
                            两间自带浴室套间的双人卧室和一个宽敞的开放
                            式厨房、餐厅和起居室空间和谐共融。</div>

                    </div>
                </li>
                <li class="project-item">
                    2
                </li>
                <li class="project-item mr0">
                    3
                </li>

            </ul>
        </div>
    </div>

    <!-- 产品中心 -->
    <div class="product">
        <div class="product-c">
            <!-- 标题部分  -->
            <div class="title">
                <div class="cname">
                    产品中心
                </div>
                <div class="ename">
                    PRODUCT CENTER
                </div>
                <div class="line">
                    <div class="l"></div>
                    <div class="r"></div>
                </div>
            </div>

            <!-- 导航 -->
            <ul class="nav">
                <!-- 通过 行内样式  给  icon  设置 不同的 背景图  -->
                <li class="nav-item">
                    <a href="">
                        <div class="icon">
                        </div>
                        <div class="cname">床 BED</div>
                        <span class="line"></span>
                    </a>

                </li>
                <li class="nav-item">
                    <a href="">
                        <div class="icon">
                        </div>
                        <div class="cname">床 BED</div>
                        <span class="line"></span>
                    </a>

                </li>
                <li class="nav-item">
                    <a href="">
                        <div class="icon">
                        </div>
                        <div class="cname">床 BED</div>
                        <span class="line"></span>
                    </a>

                </li>
                <li class="nav-item">
                    <a href="">
                        <div class="icon">
                        </div>
                        <div class="cname">床 BED</div>
                        <span class="line"></span>
                    </a>

                </li>
                <li class="nav-item">
                    <a href="">
                        <div class="icon">
                        </div>
                        <div class="cname">床 BED</div>
                        <span class="line"></span>
                    </a>

                </li>

            </ul>
        </div>
    </div>

    <!-- 服务范围  -->

    <div class="service">
        <!-- 标题部分  -->
        <div class="title">
            <div class="cname">
                服务范围
            </div>
            <div class="ename">
                PRODUCT CENTER
            </div>
            <div class="line">
                <div class="l"></div>
                <div class="r"></div>
            </div>
        </div>
        <div class="bg">
            <div class="center">
                <!-- 文案信息  -->

                <!-- 服务列表 -->
                <ul class="ser-list">
                    <li class="ser-item">
                        翻新改造
                    </li>
                    <li class="ser-item">
                        翻新改造
                    </li>
                    <li class="ser-item">
                        翻新改造
                    </li>
                    <li class="ser-item">
                        翻新改造
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="foot foot-index">
        <div class="foot-c">
            <div class="links">
                <div class="cname">简设装饰有限公司</div>
                <div class="icons">
                    <img src="img/wb.png" alt="">
                    <img src="img/wb.png" alt="">
                    <img src="img/wb.png" alt="">

                </div>
            </div>
            <!-- 竖线 选择用边框模拟 -->
            <!-- <div class="line"></div> -->
            <div class="adress">
                <p>地址：中国地区**分区6号写字楼888室</p>
                <p>地址：中国地区**分区6号写字楼888室</p>
                <p>地址：中国地区**分区6号写字楼888室</p>

            </div>
            <!-- <div class="line"></div> -->
            <div class="tel">
                <p>简设装饰有限公司</p>
                <p>简设装饰有限公司</p>
                <p>简设装饰有限公司</p>


            </div>
        </div>
    </div>
</body>

</html>